<template>
	<view class="container">
		<!-- 加载状态 - 使用wx:if/wx:else -->
		<view v-if="loading" class="loading">
			<text>加载中...</text>
		</view>

		<view v-else>
			<!-- 打车服务标题 -->
			<view class="title">{{ taxiInfo.title }}</view>
			<!-- 打车服务介绍文本 -->
			<view class="desc" v-html="taxiInfo.desc"></view>
			<!-- 二维码区域 -->
			<view class="qrcode-box">
				<text class="qrcode-desc bold">扫描下方二维码</text>
				<view class="qrcode-item" v-for="(qrcode, index) in taxiInfo.qrcodes" :key="index">
					<image class="qrcode-img" :src="qrcode.url"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getTaxiServiceListBySchoolId
	} from '@/package/api/selList.js';

	// 定义响应式数据
	const taxiInfo = ref({
		title: '',
		desc: '',
		qrcodes: []
	});

	// 加载状态
	const loading = ref(true);

	onShow(async () => {
		try {
			loading.value = true;

			// 从本地存储获取学校ID
			const schoolId = uni.getStorageSync('school_id');
			if (!schoolId) {
				uni.showToast({
					title: '未获取到学校ID',
					icon: 'none'
				});
				loading.value = false;
				return;
			}
			const data = {
				schoolId
			}

			// 调用接口获取打车服务数据
			const res = await getTaxiServiceListBySchoolId(JSON.stringify(data));
			if (res && res.code === 200 && res.data && res.data.length > 0) {
				const service = res.data[0];

				taxiInfo.value.title = service.title || '便捷打车服务';
				taxiInfo.value.desc = service.description || '暂无服务介绍';

				// 处理图片（假设图片用逗号分隔）
				const imageUrls = service.image ? service.image.split(',') : [];
				taxiInfo.value.qrcodes = imageUrls.map(url => ({
					url
				}));

				if (taxiInfo.value.qrcodes.length === 0) {
					taxiInfo.value.qrcodes = [{
							url: '/static/images/default_qrcode.png'
						},
						{
							url: '/static/images/default_payment.png'
						}
					];
				}
			} else {
				uni.showToast({
					title: '未获取到打车服务数据',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('获取打车服务数据失败', error);
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	});
</script>

<style scoped>
	/* 样式保持不变 */
	.container {
		padding: 16px;
		background-color: #fff;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 12px;
	}

	.desc {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		margin-bottom: 20px;
		white-space: pre-line;
	}

	.qrcode-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 30px;
	}

	.qrcode-item {
		display: flex;
		flex-direction: row;
		gap: 20rpx;
	}

	.qrcode-img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 8px;
	}

	.qrcode-desc {
		font-size: 24rpx;
		color: #666;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.bold {
		font-weight: bold;
		font-size: 14px;
		color: #666;
	}

	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		font-size: 16px;
		color: #999;
	}
</style>